<template>
      <Card
          :index="0"
          :margin="['20rpx','0']"
          :padding="['20px','20px','20px','20px']"
          :shadow="'0 20rpx 40rpx 0 rgba(2, 4, 38, 0.5)'"
          :showBorder="false"
          :src="store['getUserInfo']['icon']"
          :title="'发布文章'"
          headerBackground="#c6c3d8"
      >
        <template #default>
          <view class="m-body">
            <u--form
                ref="form1"
                :model="state.model"
                labelAlign="center"
                labelPosition="left"
                labelWidth="80"
            >
              <u-form-item
                  ref="item1"
                  borderBottom
                  label="标题"
              >
                <u--input
                    v-model="state.model.umsMessage.title"
                    border="none"
                ></u--input>
              </u-form-item>
              <u-form-item
                  ref="item1"
                  borderBottom
                  label="内容"
              >

                <u--textarea v-model="state.model.umsMessage.content" count placeholder="请输入内容" ></u--textarea>
              </u-form-item>
              <u-form-item
                  ref="item1"
                  borderBottom
                  label="类型"
                  @click="state.typePickerShow=true"
              >
                <u--input
                    v-model="state.typeName"
                    border="none"
                    disabled
                    disabledColor="#ffffff"
                    type="select"
                ></u--input>
                <template #right>
                  <u-icon
                      name="arrow-right"
                  ></u-icon>
                </template>
                <u-picker
                    :closeOnClickOverlay="true"
                    :columns="state.columns"
                    :show="state.typePickerShow"
                    keyName="name" @cancel="cancel" @confirm="confirm" ></u-picker>
              </u-form-item>
              <u-form-item
                  ref="item1"
                  borderBottom
                  label="图片上传"
              >
                <u-upload
                    :fileList="state.fileList"
                    :maxCount="10"
                    :previewFullImage="true"
                    multiple
                    name="3"
                    @afterRead="afterRead"
                    @delete="deletePic"
                >

                </u-upload>
              </u-form-item>
            </u--form>

          </view>

        </template>
        <template #footer>
          <view class="m-foot">
            <view class="m-btn1">
              <u-button text="提交" type="warning" @click="upload">上传图片</u-button>

            </view>
            <view class="m-btn1">
              <u-button text="提交" type="primary" @click="submit">提交</u-button>

            </view>
          </view>

        </template>

      </Card>

</template>

<script setup>
import Card from '@/components/Card'
import {reactive} from "vue";
import {uploadPhoto} from "@/pages/api/upload";
import {saveMessage,typeList} from "@/pages/api/message/message";
import {useStore} from "@/pinia/user";
const store = useStore()

const state = reactive({
  typePickerShow:false,
  typeIdPickerShow:false,
  columns: [

  ],
  typeColumns: [
    [
      {
        name:'俊哥',
        id:1

      },{
      name:'小杰',
      id:1

    }

    ]
  ],
  model: {
    umsImage: [],
    umsMessage: {
      author: store.getUserInfo['nickName'],
      content: "",
      title: "",
      type: store.getUserInfo['id'],
      typeId:'',
    }
  },
  typeName:"",
  authorName:store.getUserInfo['nickName'],
  fileList: [],

})
const deletePic = ({file}) => {
  state.fileList = state.fileList.filter(item => {
    if (item.url !== file.url) {
      return item
    }
  })
}
const add = (url) => {
  state.fileList = [...state.fileList, ...[{url: url}]]
}

const upload = () => {

  uni.showLoading({
    title:"正在上传"

  })
  state.fileList.forEach(({url}) => {

    uploadPhoto(url).then(({data}) => {
      state.model.umsImage.push({name: data})
    })
  })
  setTimeout(()=>{
    uni.hideLoading()
    uni.showToast({
      title:"上传成功",
      icon:"success",
      duration:1000

    })
  },3000)


};

const afterRead = ({file}) => {
  add(file[0].url)
}
const confirm = ({value}) => {
  state.model.umsMessage.typeId=value[0]['id']
  state.typeName=value[0]['name']
  state.typePickerShow=false
}
const confirmId = ({value}) => {
  state.model.umsMessage.author=value[0]['name']
  state.authorName=value[0]['name']
  state.typeIdPickerShow=false
}

const getTypeList = () => {
  typeList().then(({data})=>{
    state.columns=[...new Array(data)]
  })
}
const cancel = () => {
  state.typePickerShow=false
  state.typeIdPickerShow=false
}

const submit = () => {
  console.log(state.model)
  if (!state.model.umsImage[0]) {
    uni.showToast({
      title: "先上传图片铁子",
      icon: "error"
    })
  } else {
    saveMessage(state.model).then(({code}) => {
      if (code === 200) {
        uni.showToast({
          title: "发布成功",
          icon: "success"
        })
        state.model = {
          umsImage: [],
          umsMessage: {
            author: "",
            content: "",
            title: "",
            type: 0,
            typeId:'',
          }
        }
        state.fileList=[]
        state.typeName=""
        state.authorName=""

      }
    })

  }


}
getTypeList()

</script>

<style lang="scss" scoped>
    .m-body {
      padding: 0 20rpx;

    }

    .m-foot {
      width: 100%;
      display: flex;

      .m-btn1 {
        width: 50%;
      }

      .m-btn2 {
        width: 50%;

      }

}
</style>